<!--全部文章-->
<template>
    <div class="allVideobox">
        <!-- <goback></goback>-->
        <div class="videoTitle_box">
            <div
                class="videoTitle"
                v-for="(item, index) in list"
                :key="index"
                @click="articleDetail(item)"
            >
                <div class="leftImg">
                    <el-image style="width: 298px; height: 168px" :src="item.articleCover" fit="cover">
                        <div slot="error" class="image-slot">
                            <!--                            <img :src="PIC_URL + '/circle/no_data.png'" style="width: 100%;"/>-->
                        </div>
                    </el-image>
                </div>
                <div class="rightText">
                    <p class="titleName">
                        {{ item.articleTitle }}
                    </p>
                    <p class="text">
                        <span v-html="contentSub(item.articleContent)"></span>
                        <span class="details">详情 >> </span>
                    </p>
                    <p class="timer">{{ dayjs(item.publishTime) }}</p>
                </div>
            </div>
        </div>

        <!--分页 -->
        <el-pagination
            background
            class="paginationBox"
            @current-change="handleCurrentChange"
            :current-page="params.currentPage"
            :page-size="params.pageSize"
            layout="prev, pager, next, jumper ,slot"
            :total="total"
        >
            <div
                class="ensure-btn"
                @click="clickEnter(params.currentPage, params.pageSize)"
            >
                GO
            </div>
            <div class="countPage">共{{ countPage }}页</div>
        </el-pagination>
    </div>
</template>

<script>
import dayjs from "dayjs";
import {queryArticleListByPage} from "../script/api";
import goback from "../component/goback";

export default {
    data() {
        return {
            params: {
                currentPage: 1,
                pageSize: 5,
                articleType: "",
            },
            countPage: 0,
            list: [],
            total: 0,
        };
    },
    mounted() {
        this.params.articleType = this.$route.query.articleType;
        this.queryArticleListByPage();
    },
    methods: {
        contentSub(html) {
            let text = html.replace(/<\/?.+?>/g, "");
            if (text && text.length > 92) {
                text = text.substring(0, 86) + "...";
            }
            return text;
        },
        // 时间过滤
        dayjs(val) {
            if (typeof val == "string") {
                return dayjs(val).format("MM-DD HH:mm");
            } else {
                return dayjs(Number(val)).format("MM-DD HH:mm");
            }
        },
        // 文章分页
        async queryArticleListByPage() {
            const back = await queryArticleListByPage(this.params);
            if (back.status == 1) {
                this.list = back.data.list;
                this.countPage = back.data.pageBean.countPage; //总页数
                this.total = back.data.pageBean.countResult; //总条数
            }
        },
        articleDetail(item) {
            this.$router.push({
                path: "/articleDetail",
                query: {
                    articleId: item.articleId,
                    articleType: item.articleType,
                    path: 1,
                    isBack: true
                },
            });
        },
        // 分页
        handleCurrentChange(val) {
            this.params.currentPage = val;
            this.queryArticleListByPage();
        },
        //分页GO
        clickEnter(page, limit) {
            this.params.currentPage = page++;
            this.params.pageSizes = limit;
            // 调用查询方法
            this.queryArticleListByPage();
        },
    },
    components: {goback},
    beforeRouteLeave(to, from, next) {

        if (to.name == "Home") {
            from.meta.keepAlive = false;
        } else {
            from.meta.keepAlive = true;
        }
        next();
    }
};
</script>

<style scoped lang="scss">
.allVideobox {
    max-width: 860px;
    background: transparent;
    height: 100vh;
    margin: 0 auto 50px;

    .videoTitle_box {
        height: auto;
        /*overflow-y: scroll;*/
        .videoTitle {
            width: 100%;
            height: 192px;
            border: 1px solid #c9c9c9;
            display: flex;
            padding: 12px 28px 12px 28px;
            box-sizing: border-box;
            margin: 50px 0 15px;
            cursor: pointer;

            .leftImg {
                margin-right: 16px;

                img {
                    display: inline-block;
                    width: 298px;
                    height: 168px;
                }
            }

            .rightText {
                line-height: 24px;
                padding-top: 12px;
                flex: 2;

                .titleName {
                    margin-bottom: 12px;
                    font-size: 18px;
                    font-weight: bold;
                    color: #333333;
                }

                .text {
                    font-size: 16px;
                    color: #666666;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    clear: both;

                    .details {
                        float: right;
                        font-size: 16px;
                        color: #bb100f;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }

                .timer {
                    text-align: right;
                    font-size: 14px;
                    color: #7a7a7a;
                    margin-top: 20px;
                }
            }
        }
    }

    .paginationBox {
        text-align: center;
        margin-top: 28px;
        display: flex;
        justify-content: center;
        padding-bottom: 28px;

        .ensure-btn {
            width: 31px;
            line-height: 26px;
            border: 1px solid #8b8c8b;
            margin: 0 10px;
            font-size: 16px;
            color: #666666;
            border-radius: 2px;
            cursor: pointer;
        }

        .countPage {
            line-height: 28px;
            font-size: 16px;
            color: #666666;
        }
    }
}
</style>
<style>
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: transparent;
    border: 1px solid #8b8c8b;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #d72122;
    border: 1px solid #d72122;
}
</style>
